<template>
  <div class="demo">
    <Row :gutter="16">
        <Col span="21">
          <Card :bordered="false" id="let">
              <p slot="title">No border title</p>
              <p>Content of no border type. Content of no border type. Content of no border type. Content of no border type. </p>
          </Card>
          <Card :bordered="false" id="const">
              <p slot="title">No border title</p>
              <p>Content of no border type. Content of no border type. Content of no border type. Content of no border type. </p>
          </Card>
          <Card :bordered="false" id="block">
              <p slot="title">No border title</p>
              <p>Content of no border type. Content of no border type. Content of no border type. Content of no border type. </p>
          </Card>
          <Card :bordered="false" id="top">
              <p slot="title">No border title</p>
              <p>Content of no border type. Content of no border type. Content of no border type. Content of no border type. </p>
          </Card>
          <Card :bordered="false" id="global">
              <p slot="title">No border title</p>
              <p>Content of no border type. Content of no border type. Content of no border type. Content of no border type. </p>
          </Card>
        </Col>
        <Col span="3">
          <Anchor show-ink>
            <AnchorLink href="#let" title="let" />
            <AnchorLink href="#const" title="const" />
            <AnchorLink href="#block" title="块级作用域" />
            <AnchorLink href="#top" title="顶层对象属性" />
            <AnchorLink href="#global" title="global对象" />
          </Anchor>
        </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: "Demo",
  data() {
    return {
      msg: "你好"
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.demo {
  padding: 20px;
  background: #eee;
}
</style>
